<script setup>
import { ref } from 'vue'
import {
  addSupplierProductService,
  getProductListByQueryinfService
} from '@/api/supplierManage.js'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const formRef = ref()
const formModel = ref({
  id: '',
  msg: '',
  products: ''
})
const isAdd = ref([])
const list = ref()
const rules = {
  msg: [
    {
      required: true,
      message: '请输入产品信息的关键字',
      trigger: 'change'
    }
  ]
}

const emit = defineEmits(['success'])
const addSupplierProduct = async (pId) => {
  await addSupplierProductService(formModel.value.id, pId)
  ElMessage.success('添加成功')
  list.value = undefined
  dialogVisible.value = false
  emit('success')
}

const getList = async () => {
  await formRef.value.validate()
  const res = await getProductListByQueryinfService(formModel.value.msg)
  list.value = res.data.data
  isAdd.value = []
  for (let product of list.value) {
    let x = 0
    for (let productIndex of formModel.value.products) {
      if (product.productId === productIndex.productId) {
        x = 1
        break
      }
    }
    if (x === 0) {
      isAdd.value.push(false)
    } else {
      isAdd.value.push(true)
    }
  }
}

// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open = (row) => {
  dialogVisible.value = true
  formModel.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据
}

// 将网络图片地址转换为 File 对象的函数

// 向外暴露方法
defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="'添加队伍成员'" width="30%">
    <template #footer>
      <span class="dialog-footer">
        <el-form
          ref="formRef"
          :model="formModel"
          :rules="rules"
          label-width="100px"
          style="padding-right: 30px"
        >
          <el-form-item label="产品信息" prop="msg">
            <el-input
              v-model="formModel.msg"
              placeholder="请输入产品名称"
            ></el-input>
            <el-button @click="getList" :icon="Search"></el-button>
          </el-form-item>
          <el-scrollbar height="400px">
            <p
              v-for="(item, index) in list"
              :key="item.productId"
              class="scrollbar-demo-item"
            >
              {{ item.productName }}
              <el-button
                :icon="Plus"
                circle
                plain
                type="primary"
                @click="addSupplierProduct(item.productId)"
                class="addBt"
                v-if="isAdd[index] === false"
              ></el-button>
              <el-text v-if="isAdd[index] === true">已添加</el-text>
            </p>
          </el-scrollbar>
        </el-form>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.addBt {
  position: absolute;
  right: 30px;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
